import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'

const CoustomForm = defineComponent({
  name: 'BOM_ViewLeftContent',
  props: {
    model: {
      type: Object as PropType<{[key: string]: any}>,
    },
    loading: {
      type: Boolean,
      defalut: false,
    },
    labelCol: {
      type: Object as PropType<{[key: string]: any}>,
      default: () => {
        return {span: 0}
      },
    },
    wrapperCol: {
      type: Object as PropType<{[key: string]: any}>,
      default: () => {
        return {span: 24}
      },
    },
    footerClass: {
      type: String,
      default: '',
    },
    submitBtnName: {
      type: String,
      default: '查询',
    },
    resetBtnName: {
      type: String,
      default: '重置',
    },
  },
  emits: ['formSubmit', 'formReset', 'update:model'],
  setup(props, {emit, slots}) {
    let {model, labelCol, wrapperCol, loading, footerClass} = toRefs(props)

    let formRef = ref<FormInstance>()

    /**提交表单且数据验证成功后回调事件 */
    const handle_form_finish = async () => {
      emit('formSubmit', formRef.value)
    }

    /** 提交表单且数据验证失败后回调事件 */
    const handle_form_finish_failed = () => {
      emit('formSubmit', formRef.value)
    }

    /**表单 重置按钮 点击 */
    const handle_form_reset = () => {
      viewLeftContent_reset()
      emit('formReset')
    }

    // 清空表单
    const viewLeftContent_reset = () => {
      formRef.value?.resetFields()
    }

    return () => (
      <a-form
        class="overflow-auto relative"
        v-model={[formRef, 'ref']}
        model={props.model}
        label-col={labelCol.value}
        wrapper-col={wrapperCol.value}
        onFinish={handle_form_finish}
        onFinishFailed={handle_form_finish_failed}
      >
        {slots.default?.()}
        <div
          class={[
            'w-full h-mainViewfooter m-0 px-4 border-default',
            footerClass.value,
          ]}
        >
          <a-button onClick={handle_form_reset}>{props.resetBtnName}</a-button>
          <a-button
            class="ml-4 "
            type="primary"
            html-type="submit"
            loading={loading.value}
          >
            {props.submitBtnName}
          </a-button>
          {slots.footer?.()}
        </div>
      </a-form>
    )
  },
})

export default CoustomForm
